<template>
  <div>
    <!-- 修改密码 -->
    <h2 style="margin: 10px 0;text-align: center">修改密码</h2>
    <el-form :model="passwordForm" ref="passwordForm" label-width="100px">
      <el-form-item label="当前密码" prop="currentPassword" required>
        <el-input v-model="passwordForm.currentPassword" type="password"></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword" required>
        <el-input v-model="passwordForm.newPassword" type="password"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmPassword" required>
        <el-input v-model="passwordForm.confirmPassword" type="password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="updatePassword">确认修改密码</el-button>
      </el-form-item>
    </el-form>

    <!-- 修改银行卡密码 -->
    <hr>
    <h2 style="margin: 10px 0;text-align: center">修改银行卡密码</h2>
    <el-form :model="cardPasswordForm" ref="cardPasswordForm" label-width="100px">
      <el-form-item label="卡号" prop="currentCardPassword" required>
        <el-select v-model="form.cardID"
                   size="large"
                   placeholder="请选择要存款的账号">
          <el-option
              v-for="item in accounts"
              :key="item.cardID"
              :label="item.cardID"
              :value="item.cardID">
            <div style="display: flex;justify-content: space-between;">
              <span><el-tag>{{ item.cardID }}</el-tag></span>
            </div>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="当前卡密码" prop="currentCardPassword" required>
        <el-input v-model="cardPasswordForm.currentCardPassword" type="password"></el-input>
      </el-form-item>
      <el-form-item label="新卡密码" prop="newCardPassword" required>
        <el-input v-model="cardPasswordForm.newCardPassword" type="password"></el-input>
      </el-form-item>
      <el-form-item label="确认卡密码" prop="confirmCardPassword" required>
        <el-input v-model="cardPasswordForm.confirmCardPassword" type="password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="updateCardPassword">确认修改卡密码</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: JSON.parse(window.localStorage.getItem("user")),
      passwordForm: {
        currentPassword: '',
        newPassword: '',
        confirmPassword: ''
      },
      cardPasswordForm: {
        cardID: "",
        currentCardPassword: '',
        newCardPassword: '',
        confirmCardPassword: ''
      },
      accounts: [],
      form: {
        cardID: null,
        balance: null,
      },
    };
  },
  mounted() {
    this.initCardInfo();
  },
  methods: {
    initCardInfo() {
      let id = this.user[0].customerID
      this.getRequest(`/api/card/user/${id}`).then(resp => {
        if (resp) {
          if (resp.code == 1) {
            this.accounts = resp.data;
            console.log(this.accounts)
          }
        }
      })
    },
    updatePassword() {
      this.$refs.passwordForm.validate(valid => {
        if (valid) {
          this.putRequest("/api/user", this.passwordForm).then()
          console.log('密码修改成功');
        }
      });
    },
    updateCardPassword() {
      this.$refs.cardPasswordForm.validate(valid => {
        if (valid) {
          // 发送银行卡密码修改请求
          // 可以在这里调用相应的接口或方法进行银行卡密码修改操作
          console.log('银行卡密码修改成功');
        }
      });
    }
  }
};
</script>
